<script setup lang="ts">
import { ArrowDownTrayIcon } from "@heroicons/vue/24/outline";
import { PlayIcon } from "@heroicons/vue/24/solid";
import type { Ref } from "vue";
import { computed, ref } from "vue";

import Typography from "@src/components/ui/data-display/Typography.vue";
import { IConversation } from "@src/types";

const props = defineProps<{
  message: IConversation;
  self?: boolean;
}>();

const openCarousel: Ref<boolean> = ref(false);

const selectedAttachmentId: Ref<number | undefined> = ref();

// open the carousel with the selected index
const openCarouselWithAttachment = (attachmentId: number) => {
  selectedAttachmentId.value = attachmentId;
  openCarousel.value = true;
};

// close the carousel
const closeCarousel = () => {
  openCarousel.value = false;
};

// check if the message contians images or videos
const containsMedia = computed(() => {
  return true;
});
</script>

<template>
  <div>
    <div class="flex">

        <!--image-->
        <button
          class="outline-none"
        >
          <div
            :style="{ backgroundImage: `url(${message.message})` }"
            class="rounded bg-cover bg-center"
            :class="
               ['w-[12.5rem]', 'h-[12.5rem]']
            "
          >
          </div>
        </button>

    </div>
  </div>
</template>
